<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>薪酬发放管理</title>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/css/admin.css" media="all">
    <style>
        .layui-table{
            text-align: center!important;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">


            <div style="padding-bottom: 10px">

                <button class="layui-btn layuiadmin-btn-useradmin" data-type="add" id="add">新增</button>
                <button class="layui-btn layui-btn-danger layuiadmin-btn-useradmin" data-type="batchdel" id="batchdel">删除</button>
<!--                <button class="layui-btn layui-btn-danger layuiadmin-btn-useradmin" data-type="cencel" id="cencel">取消</button>-->

            </div>



            <table id="salary_management" lay-filter="salary_management" style="text-align: center!important;"></table>

            <script type="text/html" id="table-salary_management">
<!--                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>-->
<!--                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
            </script>


            <script src="../../../static/js/jquery-3.6.0.min.js"></script>
            <script type="text/javascript">
                $(function (){
                    var obj = localStorage.getItem("filed")
                    var filed =JSON.parse(obj)
                    $("#dept_father").text(filed.dept_father)
                    $("#number").text(filed.number)
                    $("#sal_total_basic").text(filed.sal_total_basic)
                    $("#dis_amount").text(filed.dis_amount)

                })
            </script>


            <div style="padding: 10px">
                一级部门：<span id="dept_father"></span> &nbsp
                总人数：<span id="number"></span> &nbsp
                基本薪酬总额：<span id="sal_total_basic"></span> &nbsp
                实发金额：<span id="dis_amount"></span>
            </div>


            <table id="salary" lay-filter="salary" style="text-align: center!important;"></table>

            <script type="text/html" id="table-salary-register" >

                <a href="register.html" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="register"><i class="layui-icon layui-icon-edit"></i>查看</a>

            </script>

            <!--  日期格式化处理 -->
            <script type="text/html" id="dis_timeTpl">
                {{formatDate(d.dis_time)}}
            </script>

        </div>
    </div>
</div>

<!--<script src="js/jquery-2.0.3.min.js"></script>-->
<script src="../../../static/layui/layui.js"></script>
<script type="text/javascript">
    // 日期格式转换函数
    function formatDate(str) {
        if(str != null){
            var now = new Date(str);
            var year = now.getFullYear();  //取得4位数的年份
            var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date = now.getDate();      //返回日期月份中的天数（1到31）
            return year + "-" + month + "-" + date;
        }
        return "";
    }

</script>

<script src="../../../static/layui/layui.js"></script>
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/javascript">

    layui.use(['layer','table','form','element','util'], function(){
        var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,table = layui.table
            ,element = layui.element
            ,util = layui.util

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 80px;">处理右侧面板的操作</div>'
                    ,area: ['230px', '50%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

        //加载table
        table.render({
            elem: '#salary_management'
            ,url:'/pay/provide/payroll' //后端接口
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
            ,title: '雇员数据表'
            ,align:'center'
            ,cols: [[
                {type:'radio'}
                ,{title:'薪酬单编号',align:'center',templet:"#xuhao"}
                ,{field:'dept_father', title:'一级部门',align:'center'}
                ,{field:'number', title:'总人数',align:'center'}
                ,{field:'sal_total_basic', title:'基本薪酬总额',align:'center'}
                ,{field:'dis_amount',title:'实发金额',align:'center'}
                ,{field:'dis_time', title:'发放时间',align:'center',templet:"#dis_timeTpl"}
                // ,{fixed: 'right', title:'操作', toolbar: '#table-salary_management',width:280}
            ]]
            // ,page: {
            //     curr: 1 //设定初始在第 5 页
            //     ,limit: 5 //设定初始每页显示 5 条
            // }
            ,page:true,
            limits:[5,10,15,20]
        });

        table.render({
            elem: '#salary'
            // ,url:'/pay/provide/deps' //后端接口
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
            ,title: '雇员数据表'
            ,align:'center'
            ,cols: [[
                {type:'numbers'}
                ,{field:'dept_father',title:'一级部门',align:'center'}
                ,{field:'dept_full_name', title:'二级部门',align:'center'}
                ,{field:'countN', title:'人数',align:'center'}
                ,{field:'wage', title:'基本薪酬总额（元）',align:'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#table-salary-register',width:280}
            ]]
            // ,page: true,
            // limits:[5,10,15,20]
        });

        //监听行工具事件
        // table.on('tool(salary_management)', function(obj){
        //     var data = obj.data;
        //     console.log(obj)
        //     if(obj.event === 'del'){
        //         layer.confirm('真的删除行么', function(index){
        //             $.ajax({
        //                 url:"/pay/provide/del", //请求后端接口地址
        //                 type:"post", //请求方式get | post
        //                 data:{dept_father:data.dept_father}, //提交json字符串对象参数
        //                 dataType:"json", //后端返回参数类型
        //                 success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
        //                     if(res.code == 0){//成功
        //                         layer.msg(res.msg);//弹出提示
        //                         table.reload('salary_management'); //数据刷新
        //                         layer.close(index); //关闭弹层
        //                     }
        //                     if(res.code == -1){//系统出问题
        //                         layer.msg(res.msg,{icon: 5});//弹出提示
        //                     }
        //                 }
        //             })
        //         });
        //     } else if(obj.event === 'edit'){
        //         layer.open({
        //             type: 2
        //             ,title: '修改雇员信息'
        //             ,skin: 'layui-layer-molv'
        //             ,content: 'edit.html'
        //             ,maxmin: true
        //             ,area: ['480px', '570px']
        //             ,success: function (layero,index){
        //                 var body = layer.getChildFrame("body",index);
        //                 var contentWindow = layero.find('iframe')[0].contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
        //                 body.find("input[name=dept_father]").val(data.dept_father).prop("readonly",true);
        //                 body.find("input[name=sal_frequency]").val(data.sal_frequency);
        //                 body.find("input[name=number]").val(data.number);
        //                 body.find("input[name=sal_total_basic]").val(data.sal_total_basic);
        //                 body.find("input[name=dis_amount]").val(data.dis_amount);
        //                 body.find("input[name=job_title]").val(data.job_title);
        //
        //                 var now = new Date(data.dis_time);
        //                 var year = now.getFullYear();  //取得4位数的年份
        //                 var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
        //                 var date = now.getDate();      //返回日期月份中的天数（1到31）
        //                 var dis_time = year + "-" + month + "-" + date;
        //
        //                 body.find("input[name=dis_time]").val(dis_time);
        //
        //             }
        //             ,btn: ['确定', '取消']
        //             ,yes: function(index, layero){
        //                 var iframeWindow = window['layui-layer-iframe'+ index]
        //                     ,submitID = 'LAY-user-front-submit'
        //                     ,submit = layero.find('iframe').contents().find('#'+ submitID);
        //                 //监听提交
        //                 iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
        //                     var field = data.field; //获取提交的字段
        //                     $.ajax({
        //                         url:"/pay/provide/edit", //请求后端接口地址
        //                         type:"post", //请求方式get | post
        //                         data:JSON.stringify(field), //提交json字符串对象参数
        //                         contentType:"application/json;charset=utf-8", //发送信息至服务器时内容编码类型
        //                         dataType:"json", //后端返回参数类型
        //                         success:function (res){ //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
        //                             if(res.code == 0){//成功
        //                                 layer.msg(res.msg);//弹出提示
        //                                 table.reload('salary_management'); //数据刷新
        //                                 layer.close(index); //关闭弹层
        //                             }
        //                             if(res.code == -1){//系统出问题
        //                                 layer.msg(res.msg,{icon: 5});//弹出提示
        //                             }
        //                         }
        //                     })
        //                 });
        //                 submit.trigger('click');
        //             }
        //         });
        //     }
        //
        //     // switch (obj.event) {
        //     //     case '#addRow':
        //     //         var oldDatas = layui.table.cache[tableId];
        //     //         var newData = {
        //     //
        //     //         };
        //     //         oldDatas.push(newData);
        //     //         table.reload(tableId, {
        //     //             data : oldDatas,
        //     //         })
        //     //         break;
        //     //     case 'delRow':
        //     //         var oldDatas = layui.table.cache[tableId];
        //     //         var checkDatas = table.checkStatus(tableId);
        //     //         var data =  checkDatas.data;
        //     //         if (data.length < 1 ) {
        //     //             return adminKit.warningMsg('请至少选择一条数据！');
        //     //         }
        //     //         adminKit.dialogConfirm('您确定要删除这些行吗！', function (isConfirm) {
        //     //             if(isConfirm){
        //     //                 formKit.delRow(table, tableId, oldDatas)
        //     //             }
        //     //             layer.close(layer.index);
        //     //         });
        //     //         break;
        //     // }
        // });


        //监听第一张表的按钮，实现下面表的数据显示
        table.on('radio(salary_management)', function(obj){
            // 获取选中的记录信息
            var filed = obj.data;
            localStorage.setItem("filed",JSON.stringify(filed))
            // 加载相关的数据到下面的表格中
            table.reload('salary', {
                url:"/pay/provide/search",
                where: filed
            });
        });


        //监听登记按钮
        // table.on('tool(salary)', function(obj){  // detail为弹出框前的表格id
        //     layer.open({
        //         type: 2
        //         ,title: '修改雇员信息'
        //         ,skin: 'layui-layer-molv'
        //         ,content: 'register.html'
        //         ,maxmin: true
        //         ,area: ['480px', '570px']
        //         ,success: function (layero,index){
        //             var body = layer.getChildFrame("body",index);
        //             var contentWindow = layero.find('iframe')[0].contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
        //             body.find("input[name=dept_father]").val(data.dept_father).prop("readonly",true);
        //             body.find("input[name=sal_frequency]").val(data.sal_frequency);
        //             body.find("input[name=number]").val(data.number);
        //             body.find("input[name=sal_total_basic]").val(data.sal_total_basic);
        //             body.find("input[name=dis_amount]").val(data.dis_amount);
        //             body.find("input[name=job_title]").val(data.job_title);
        //
        //             var now = new Date(data.dis_time);
        //             var year = now.getFullYear();  //取得4位数的年份
        //             var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
        //             var date = now.getDate();      //返回日期月份中的天数（1到31）
        //             var dis_time = year + "-" + month + "-" + date;
        //
        //             body.find("input[name=dis_time]").val(dis_time);
        //
        //         }
        //     })
        // });


            //监听第二张表的点击事件，并获取点击行的值
            table.on('tool(salary)', function(obj){
                var data =obj.data
                localStorage.setItem("dept",JSON.stringify(data))
            });


            //事件
            var active = {
                batchdel: function () {
                    var checkStatus = table.checkStatus('salary_management')
                        , checkData = checkStatus.data; //得到选中的数据

                    if (checkData.length == 0) {
                        return layer.msg('请选择数据');
                    }

                    // 程序走到这里，表示已经有选中要删除的数据了。
                    layer.confirm('确定删除吗？', function () {
                        //真实删除，应该和后端结合 ajax
                        var ids = new Array();
                        $.each(checkData, function (index, item) {
                            // 向数组对象中添加元素
                            ids.push(item.dept_father);
                        })
                        $.ajax({
                            url: "/pay/provide/batchdel",
                            type: "post",
                            data: {ids: ids},
                            traditional: true,
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 0) {//成功
                                    layer.msg(res.msg);//弹出提示
                                    table.reload('salary_management'); //数据刷新
                                    table.reload('salary'); //数据刷新
                                }
                                if (res.code == -1) {//系统出问题
                                    layer.msg(res.msg, {icon: 5});//弹出提示
                                }
                            }
                        })
                    })
                }
                , add: function () {
                    layer.open({
                        type: 2
                        , title: '添加薪酬单信息'
                        , skin: 'layui-layer-molv'
                        , content: 'add.html'
                        , maxmin: true
                        , area: ['450px', '450px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-user-front-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);
                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var field = data.field; //获取提交的字段
                                console.log(field);
                                // console.log(JSON.stringify(field)) // 将普通js对象转换为JSON字符串对象
                                // {key:value,key:'value'} // 普通表单格式 -- js对象
                                // {"key":value,"key":"value"} // json格式 -- json字符串对象
                                // 提交给后端 -- ajax异步提交 -- jQuery -- 在线工具参考：https://tool.oschina.net/
                                $.ajax({
                                    url: "/pay/provide/addpayroll", //请求后端接口地址
                                    type: "post", //请求方式get | post
                                    data: JSON.stringify(field), //提交json字符串对象参数
                                    contentType: "application/json;charset=utf-8", //发送信息至服务器时内容编码类型
                                    dataType: "json", //后端返回参数类型
                                    success: function (res) { //请求成功后回调函数res = JSONObject.toJSONString(resultMap)
                                        if (res.code == 0) {//成功
                                            layer.msg(res.msg);//弹出提示
                                            table.reload('salary_management'); //数据刷新
                                            table.reload('salary'); //数据刷新
                                            layer.close(index); //关闭弹层
                                        }
                                        if (res.code == -1) {//系统出问题
                                            table.reload('salary_management'); //数据刷新
                                            table.reload('salary'); //数据刷新
                                            layer.msg(res.msg);//弹出提示
                                            layer.close(index); //关闭弹层
                                        }
                                    }
                                })


                            });
                            submit.trigger('click');
                        }
                    });
                }

                // //点击取消，刷新表格
                // ,cencel:function (){
                //     table.reload('salary_management');
                // }
                // ,append:function (){
                //     console.log("hai")
                //     var tableData = table.cache['salary_management'];
                //     var newRowData = {
                //         "sal_statement_id":'',
                //        " sal_frequency":'',
                //        " number":'',
                //        " sal_total_basic":'',
                //        " job_title":'',
                //         "dis_amount":'',
                //        " dis_time":''
                //     };
                //     tableData.push(newRowData);
                //     table.reload('salary_management', {data: tableData});
                // }
            };

            $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    });
</script>
</body>
</html>